<template>
	<view>
		<view>
			<navbar title='我的' />
		</view>
		<view v-if="userInfo.username != ''" class="me-info">
			<view class="me-img">
				<u--image :src="userInfo.avatarUrl" shape="circle" width="150rpx" height="150rpx"></u--image>
			</view>
			<view>
				<view class="me-text">
					<text style="font-size: 1.3rem; font-weight: bold; color: #3c4caa;">{{userInfo.nickName}}</text>
					<text style="font-size: 0.8rem; margin-top: 5rpx; color: #AAA;">欢迎回来，校园探险家！</text>
					<text style="font-size: 0.8rem; margin-top: 5rpx; color: #AAA;">准备好与同学分享您的奇思妙想了吗？</text>
				</view>
			</view>
		</view>
		<view v-else class="me-info">
			<view class="me-img">
				<u--image src="https://img2.imgtp.com/2024/04/01/Cd8a3lY3.png" shape="circle" width="150rpx" height="150rpx"></u--image>
			</view>
			<view>
				<view class="me-text" @click="login">
					<text style="font-size: 1.3rem; font-weight: bold;">立即登录</text>
					<text style="font-size: 0.8rem; margin-top: 5rpx; color: #AAA;">嘿，准备好探索未知领域了吗？</text>
					<text style="font-size: 0.8rem; margin-top: 5rpx; color: #AAA;">登录校园圈，发现更多有趣的校园生活！</text>
				</view>
			</view>
		</view>
		<view class="me-content">
			<view>
				<view class="me-menu">
					<view class="me-menu-item" @click="personalData">
						<view class="list-l">
							<u-icon name="account-fill"></u-icon>
							<text>个人资料</text>
						</view>	
						<view class="list-r">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="me-menu-item" @click="myPosting">
						<view class="list-l">
							<u-icon name="calendar-fill"></u-icon>
							<text>我的帖子</text>
						</view>	
						<view class="list-r">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="me-menu-item" @click="userProtocol">
						<view class="list-l">
							<u-icon name="bookmark-fill"></u-icon>
							<text>用户协议</text>
						</view>	
						<view class="list-r">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="me-menu-item" @click="showContact = true">
						<view class="list-l">
							<u-icon name="server-man"></u-icon>
							<text>联系客服</text>
						</view>	
						<view class="list-r">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view style="margin-top: 50rpx; padding: 0 20rpx;" v-if="userInfo.username != ''">
					<u-button text="退出登录" color="#5976d6" @click="onLogout"></u-button>
				</view>
			</view>
			
			<view style="display: flex; flex-direction: column; align-items:center; padding-top: 80rpx;">
				<view>
					<image src="../../static/logo.png" style="width: 300rpx; height: 100rpx;"></image>
				</view>
				<view>
					<text style="color: #AAA; font-weight: 800;">BAAGE.CN 提供技术支持</text>
				</view>
			</view>
		</view>
		<view >
			<u-modal :show="showContact" 
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			@close="showContact=false"
			 title="联系我们" >
				<view class="slot-content">
					<rich-text>
						<figure style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">
							<img src="https://img2.imgtp.com/2024/04/11/u0GKeLLF.jpg" alt="微信公众号 baage-cn" title="微信公众号 baage-cn" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; width:350rpx; height: 350rpx">
							<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">微信公众号 baage-cn</figcaption>
						</figure>
						<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.5em 0px;"></p>
					</rich-text>
					<u--text prefixIcon="qq-fill" align="center" text="1341251971" type="info"></u--text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	
	import store from '@/store/index.js';
	import { mapState,mapMutations } from 'vuex'
	import { getLoginInfo, logout } from '@/apis/user';
	
	export default {
		data() {
			return {
				showContact: false,
				logined: false,
				userInfo: this.$store.state.user
			}
		},
		methods: {
			...mapMutations(['setUserInfo', 'clearUser']),
			login() {
				uni.navigateTo({
					url: '/pages/me/login/login'
				})
			},
			onLogout() {
				logout().then(res => {
					this.clearUser();
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '成功退出'
					});
				})
			},
			personalData() {
				uni.navigateTo({
					url: '/pages/me/personal-data/personal-data'
				})
			},
			userProtocol() {
				uni.navigateTo({
					url: '/pages/me/user-protocol/user-protocol'
				})
			},
			myPosting() {
				uni.navigateTo({
					url: '/pages/me/my-posting/my-posting'
				})
			}
		},
		computed: {
			...mapState({
				user: state => state.user
			})
		},
		// onShow
		onShow() {
		},
		onPullDownRefresh() {
			let _this = this;
			console.log('refresh');
			getLoginInfo().then(res => {
				// 获取登录信息
				_this.setUserInfo(res.data)
			}).finally(r => {
				uni.stopPullDownRefresh();
			})
		}
	}
</script>

<style>
	body {
		background: rgba(231, 231, 231, 0.4);
	}
	
	.me-info {
		display: flex;
		width: 750rpx;
		padding: 20rpx 70rpx 10rpx;
		
	}
	
	.me-text {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		padding-top: 15rpx;
	}
	
	.me-menu {
		background: #fafdfd;
		border-radius: 15rpx;
		margin: 0 20rpx;
		margin-top: 30rpx;
	}
	
	.me-menu > view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.me-menu > view + view {
		border-top:0.5rpx solid #e5e5e5;
	}

	.me-menu-item {
		margin-bottom: 15rpx;
	} 

	.list-l {
		display: flex;
		padding:37rpx 35rpx;
	}
	.list-l text {
		padding-left:24rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.list-r{
		padding:37rpx 20rpx;
	}
	
	
</style>

